<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>

<div id="app">
    <!--
        v-if条件渲染：
            v-if中测蔗条件为true时，会渲染标签中的内容,否则不渲染则继续向下看是否有v-else-if
            如果有v-else-if,则从上到下测试每一个条件，只要有一个为true，则渲染该标签中的内容
            如果v-if后没有v-else-if，只是有v-else,则在v-if测试不为true时，会渲染v-else标签中的内容
            如果没有v-else则每个测蔗都为false时则一个元素都不会渲染
    -->
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 80">良好</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不及格</p>

    <!--
        我们一个条件满足时要控制多个元素的渲染要吧有两种方式
        方式一，使用一个div标签把多个等渲染的元素放在其内部
        方式二，使用template标签把多个等渲染的元素放在其内部（推荐，因为template标签本身是不会被渲染出来的）

        这里我们使用了v-show,它与v-if的异同点
            相同点：都可以按条件来控制元素是否可以在页面上看到
            不同点：
                1、v-if：是直接不渲染元素，页面源码中都没有这个元素任何信息，v-show则只是在不满足时让元素不可见，源码上是可以看到已经渲染出来元素了
                2、对于经常切换显示和隐藏的推荐使用v-show(性能好)，v-if如果频繁的切换显示隐藏则会频繁移除元素和添加元素，性能会下降
                3、v-show：不支持使用template标签，也不支持类似v-else-if v-else这此分支判断
    -->
    <div v-show="is_adult">
        <ul>
            <li>看电影</li>
            <li>玩游戏</li>
        </ul>
    </div>
    <template v-if="!is_adult">
        <ul>
            <li>写作业</li>
            <li>听网课</li>
        </ul>
    </template>
    <button @click="is_adult = !is_adult">切换</button>
</div>

<script>
    const {createApp,ref} = Vue
    let config = {
        setup() {
            const score = ref(76)
            const is_adult = ref(true)
            return { score,is_adult }
        }
    }

    app = createApp(config)
    app.mount('#app')
</script>
</body>
</html>